<template>
  <div>
    <div>
      <h3>权限设置</h3>
      <div style="margin-top: 10px;">
        <el-table :data="authData" border style="width: 100%">
          <el-table-column label="权限" prop="name" min-width="180" align="center"></el-table-column>
          <el-table-column label="人员" min-width="180" align="center">
            <template slot-scope="scope">
              <span style="color: #409EFF;cursor:pointer;" @click="selectAuthPeople(scope.row)">{{scope.row.people.length === 0? '添加': (scope.row.people.map(item => item.name)).join(',')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import * as dd from 'dingtalk-jsapi'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
        tableData: [],
        authData: [{
          name: '管理员',
          id: '1247700573888290817',
          people: []
        },{
          name: '部门主管',
          id: '1321365196464197633',
          people: []
        },{
          name: '普通员工',
          id: '1321366856351617026',
          people: []
        },{
          name: '观察者',
          id: '1301793232233959426',
          people: []
        }],
      }
    },
    mixins: [dingMixin],
    mounted(){
      this.searchStep();
    },
    methods: {
      async searchStep() {
        this.authData.forEach(async (item) => {
          item.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: item.id});
        })
      },
      selectAuthPeople(row){
        this.complexPicker(100, [], row.people.map(item => item.emplId)).then(async (data)=>{
          let ids = data.map(item => item.emplId);
          if(! await this.$httpN.postQ('sys/user/setUserRole', {roleId: row.id, dingIds: ids.join(',')})) return;
          formUtil.submitSuccess('保存成功');
          row.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: row.id});
        })
      }
    }
  }
</script>
